<template>
    <view>
        <view class="xzq">
            <view class="xzq_5" v-for="(rq, index) in xzq" :key="index">
                <!-- 近五天 -->

                <view>{{ rq.zhouji }}</view>

                <view>{{ rq.riqi }}</view>
            </view>
            <view class="xzq_rl">
                <!-- 要预约更后面弹窗选择日期 -->
                <image class="xzq_rq" src="/static/pages/img/日历.png"></image>
                <image class="xzq_sjx" src="/static/pages/img/三角形.png"></image>
            </view>
        </view>

        <view class="ge4"></view>

        <view class="bxqk">
            <!-- 包厢情况 -->
            <navigator class="lb" url="/packageB/baoxiang/baoxiang" v-for="(bx, index) in bx" :key="index">
                <view class="bx_h1" style="order: 1">
                    <!-- 第一行 -->
                    <view>
                        <!-- 图片 -->
                        <image class="bx_hx_tp" :src="bx.tp"></image>
                    </view>
                    <view class="bx_h1_text">
                        <!-- 里面三行文字 -->
                        <view class="bx_name">{{ bx.name }}</view>
                        <view class="bx_gn">{{ bx.gongneng }}</view>
                        <view class="bx_tj">推荐人数：{{ bx.tuijian }}人</view>
                    </view>
                    <view class="bx_qk">
                        <!-- 包厢使用情况 -->
                        <view class="bx_sj">
                            <view class="bx_qk_sy">17:18结束</view>
                        </view>
                        <view>
                            <view class="bx_qk_qk">使用中</view>
                        </view>
                    </view>
                </view>

                <view class="bx_h2" style="order: 2">
                    <!-- 第二行 -->
                    <view class="bx_ss" v-for="(bx_ss, index1) in sheshi" :key="index1">
                        {{ bx_ss.name }}
                    </view>
                </view>

                <view class="bx_h3" style="order: 3">
                    <!-- 第三行 -->
                    <view class="kexuan"></view>
                    <text>可选</text>
                    <view class="bukexuan"></view>
                    <text>不可选</text>
                    <text class="jaige">{{ bx.Money }}元/{{ bx.xs }}小时</text>
                </view>

                <view class="bx_h4">
                    <!-- 第四行 -->
                    <view class="bx_zt" v-for="(zt, index1) in bx_zt" :key="index1">
                        <view class="bx_fk">{{ zt.fk }}</view>

                        <view>{{ zt.sj }}</view>
                    </view>
                </view>

                <view class="ge3"></view>
            </navigator>
        </view>
    </view>
</template>

<script>
// pages/yuding/yuding.js
export default {
    data() {
        return {
            xzq: [
                {
                    zhouji: '今天',
                    riqi: '04-12'
                },
                {
                    zhouji: '周六',
                    riqi: '04-13'
                },
                {
                    zhouji: '周日',
                    riqi: '04-14'
                },
                {
                    zhouji: '周一',
                    riqi: '04-15'
                },
                {
                    zhouji: '周二',
                    riqi: '04-16'
                }
            ],

            bx: [
                {
                    tp: '/static/pages/img/bx.jpg',
                    name: '大包-209春墨',
                    gongneng: '多功能房（茶室，棋牌，休息，影音）',
                    tuijian: '6',
                    Money: '108.8',
                    xs: '3'
                },
                {
                    tp: '/static/pages/img/bx.jpg',
                    name: '大包-209春墨',
                    gongneng: '多功能房（茶室，棋牌，休息，影音）',
                    tuijian: '6',
                    Money: '108.8',
                    xs: '3'
                }
            ],

            sheshi: [
                {
                    name: '自动大麻将机'
                },
                {
                    name: '新风系统'
                },
                {
                    name: '五人茶桌'
                },
                {
                    name: '沙发床'
                },
                {
                    name: '手搓麻将'
                },
                {
                    name: '独卫'
                },
                {
                    name: '投影仪'
                }
            ],

            bx_zt: [
                {
                    fk: '红',
                    sj: '18'
                },
                {
                    fk: '红',
                    sj: '19'
                },
                {
                    fk: '红',
                    sj: '20'
                },
                {
                    fk: '红',
                    sj: '21'
                },
                {
                    fk: '红',
                    sj: '22'
                },
                {
                    fk: '空',
                    sj: '23'
                },
                {
                    fk: '空',
                    sj: '0'
                },
                {
                    fk: '空',
                    sj: '1'
                },
                {
                    fk: '空',
                    sj: '2'
                },
                {
                    fk: '空',
                    sj: '3'
                },
                {
                    fk: '空',
                    sj: '4'
                },
                {
                    fk: '空',
                    sj: '5'
                },
                {
                    fk: '空',
                    sj: '6'
                },
                {
                    fk: '空',
                    sj: '7'
                },
                {
                    fk: '空',
                    sj: '8'
                },
                {
                    fk: '空',
                    sj: '9'
                },
                {
                    fk: '空',
                    sj: '10'
                },
                {
                    fk: '空',
                    sj: '11'
                },
                {
                    fk: '空',
                    sj: '12'
                },
                {
                    fk: '空',
                    sj: '13'
                },
                {
                    fk: '空',
                    sj: '14'
                },
                {
                    fk: '空',
                    sj: '15'
                },
                {
                    fk: '空',
                    sj: '16'
                },
                {
                    fk: '空',
                    sj: '17'
                }
            ],

            rq: {
                zhouji: '',
                riqi: ''
            },

            bx_ss: {
                name: ''
            },

            zt: {
                fk: '',
                sj: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
/* pages/yuding/yuding.wxss */
</style>
